<template>
	<div class="all">
		<div class="left">
			<left></left>
		</div>
		<div class="right">
			<div class="top">
				<top></top>
			</div>

			<div class="content">
				
				<div class="flexb">
					<div class="flex">
						<el-button type="warning" @click="log = true">创建活动</el-button>
					</div>
				</div>

				<div class="table" v-loading="loading">
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column label="活动ID" width="100">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.id }}</span>
							</template>
						</el-table-column>
						<el-table-column label="活动名称">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.title }}</span>
							</template>
						</el-table-column>
						<el-table-column label="活动类型">
							<template slot-scope="scope">
								<span style="margin-left: 10px" v-if="scope.row.type == 1 ">送流量</span>
								<span style="margin-left: 10px" v-if="scope.row.type == 2 ">送钱</span>
							</template>
						</el-table-column>
						<el-table-column label="活动条件">
							<template slot-scope="scope">
								<div style="margin-left: 10px">充{{ scope.row.condition }}赠送{{ scope.row.num }}</div>
								<div style="margin-left: 10px" v-if="scope.row.isCurrent == 0">当月生效</div>
								<div style="margin-left: 10px" v-if="scope.row.isCurrent == 1">次月生效</div>
							</template>
						</el-table-column>
						<el-table-column label="活动简介">
							<template slot-scope="scope">
								<div style="margin-left: 10px">{{scope.row.tips}}</div>
							</template>
						</el-table-column>
						<el-table-column label="活动时间">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.startTime }}-{{ scope.row.endTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="活动卡数量" width="100">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.cardCount }}</span>
							</template>
						</el-table-column>

						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" @click="jiaka(scope.row.id)">添加卡</el-button>
								<el-button type="text" @click='daochu(scope.row.id)'>下载卡明细</el-button>
								<el-button type="text" @click="shanchu(scope.row.id)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next"
						:current-page="page" @current-change="fanye" :page-size="page_size" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
		<el-dialog title="添加卡" :visible.sync="log" :close-on-click-modal="false" width="600px">
			<div class="flex">
				<div class="f1">按区间:</div>
				<div class="f2">
					<el-input v-model="huodong.mobile" style="width: 200px;" placeholder="起始ICCID"></el-input>
					-
					<el-input v-model="huodong.mobile" style="width: 200px;" placeholder="结束ICCID"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">按导入:</div>
				<div class="f2">
					<el-button type="warning">导入文件</el-button>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取 消</el-button>
				<el-button type="primary" @click="tianjia">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="创建活动" :visible.sync="log" :close-on-click-modal="false" width="700px">
			<div class="flex">
				<div class="f1">活动名称:</div>
				<div class="f2">
					<el-input v-model="huodong.title" style="width: 400px;" placeholder="活动名称"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">活动类型:</div>
				<div class="f2">
					<el-select v-model="huodong.type" clearable placeholder="选择活动类型">
						<el-option label="充值送流量" value="1"></el-option>
						<el-option label="充值送费" value="2"></el-option>
					</el-select>
				</div>
			</div>
			<div class="flex">
				<div class="f1">设置条件:</div>

				<div class="f2" style="background: #eaeaea; padding: 20px; width: 500px;" v-if="huodong.type == 1">
					<div class="flex">
						<div class="f1">充值大于:</div>
						<div class="f2">
							<el-input v-model="huodong.condition" style="width: 200px;" placeholder="充值大于多少"></el-input>
						</div>
						<div class="f1">
							<el-checkbox v-model="huodong.checked">必须首充</el-checkbox>
						</div>
					</div>
					<div class="flex">
						<div class="f1">赠送流量额度:</div>
						<div class="f2">
							<el-input v-model="huodong.num" style="width: 200px;" placeholder="赠送流量额度"> <template
									slot="append">GB</template></el-input>
						</div>
					</div>
					<div class="flex">
						<div class="f1" style="margin-bottom: 0;">赠送月份:</div>
						<div class="f2" style="line-height: 40px;">
							<el-radio v-model="huodong.isCurrent" label="0">当月</el-radio>
							<el-radio v-model="huodong.isCurrent" label="1">次月</el-radio>
						</div>
					</div>
				</div>

				<div class="f2" style="background: #eaeaea; padding: 20px; width: 500px;" v-if="huodong.type == 2">
					<div class="flex">
						<div class="f1">充值大于:</div>
						<div class="f2">
							<el-input v-model="huodong.condition" style="width: 200px;" placeholder="充值大于多少"></el-input>
						</div>
					</div>
					<div class="flex">
						<div class="f1">赠送金额:</div>
						<div class="f2">
							<el-input v-model="huodong.num" style="width: 200px;" placeholder="充值大于多少"></el-input>
						</div>
					</div>
				</div>

			</div>
			<!-- <div class="flex" style="margin-top: 20px;">
				<div class="f1">活动范围:</div>
				<div class="f2" style="background: #eaeaea; padding: 20px;  width: 500px;">

					<div class="flex">
						<div class="f1">
							<el-radio v-model="huodong.radio" label="1">按区间:</el-radio>
						</div>
						<div class="f2">
							<el-input v-model="huodong.startTime" style="width: 150px;" placeholder="起始ICCID"></el-input>
							-
							<el-input v-model="huodong.endTime" style="width: 150px;" placeholder="结束ICCID"></el-input>
						</div>
					</div>
					<div class="flex">
						<div class="f1">
							<el-radio v-model="huodong.radio" label="2">按导入:</el-radio>
						</div>
						<div class="f2">
							<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList"
							 :limit='1' :on-change="shangchuan" :auto-upload="false">
								<el-button slot="trigger" type="warning">选取文件</el-button>
							</el-upload>
							<el-button type="text" @click="xiazai">下载导入模板</el-button>
						</div>
					</div>
				</div>
			</div> -->
			<div class="flex" style="margin-top: 20px;">
				<div class="f1">活动时间:</div>
				<div class="f2">
					<el-date-picker style="width: 470px; margin-right: 10px;" v-model="time" @change="timechange"
						value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="——"
						start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
				</div>
			</div>
			<div class="flex">
				<div class="f1">活动说明:</div>
				<div class="f2">
					<el-input type="textarea" :rows="4" style="width: 400px;" placeholder="请输入内容"
						v-model="huodong.tips"></el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取 消</el-button>
				<el-button type="primary" @click="tianjia">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="活动加卡" :visible.sync="log2" :close-on-click-modal="false" width="700px">
			<div class="flex" style="margin-top: 20px;">
				<div class="f1">活动范围:</div>
				<div class="f2" style="background: #eaeaea; padding: 20px;  width: 500px;">

					<div class="flex">
						<div class="f1">
							<el-radio v-model="jiakas.radio" label="1">按区间:</el-radio>
						</div>
						<div class="f2">
							<el-input v-model="jiakas.start_num" value-format="yyyy-MM-dd HH:mm:ss" style="width: 150px;" placeholder="起始ICCID"></el-input>
							-
							<el-input v-model="jiakas.end_num" value-format="yyyy-MM-dd HH:mm:ss" style="width: 150px;" placeholder="结束ICCID"></el-input>
						</div>
					</div>
					<div class="flex">
						<div class="f1">
							<el-radio v-model="jiakas.radio" label="2">按导入:</el-radio>
						</div>
						<div class="f2">
							<el-upload class="upload-demo" ref="upload"
								action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList" :limit='1'
								:on-change="shangchuan2" :auto-upload="false">
								<el-button slot="trigger" type="warning">选取文件</el-button>
							</el-upload>
							<el-button type="text" @click="xiazai">下载导入模板</el-button>
						</div>
					</div>

				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log2 = false">取 消</el-button>
				<el-button type="primary" @click="tianjia2">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'

	import FileSaver from 'file-saver'
	import XLSX from "xlsx"


	export default {
		name: 'huodong',
		components: {
			left,
			top
		},
		data() {
			return {
				fileList: "",
				textarea: "",
				options: [],
				log2: false,
				huodong: {
					type: "1",
					condition: "",
					endTime: "",
					isCurrent: "0",
					num: "",
					startTime: "",
					tips: "",
					title: "",
					file: "",
					radio: "1",
					checked: true
				},
				changecon: {

				},
				search: {
					iccid: "",
					time: "",
					start: "",
					end: ""
				},
				time: "",

				log: false,
				page: 1,
				page_size: 20,
				total: 0,
				loading: true,
				tableData: [],
				jiakas: {
					activity_id: "",
					end_num: "",
					start_num: "",
					file: "",
					radio: "1"
				}
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			this.gethuodong()

		},
		methods: {

			//下载卡明细
			daochu: function(id) {
				this.axios.get(this.url + `/work/activity/exportCardInfo?activity_id=` + id)
					.then(response => {

						if (response.data.success == true) {

							let multipleSelection = response.data.result
							var wopts = {
								bookType: 'xlsx',
								bookSST: true,
								type: 'binary'
							};
							var workBook = {
								SheetNames: ['Sheet1'],
								Sheets: {},
								Props: {}
							};
							var table = [];
							for (var i = 0; i < multipleSelection.length; i++) {
								var params = {
									activityId: multipleSelection[i].activityId,
									createBy: multipleSelection[i].createBy,
									createTime: multipleSelection[i].createTime,
									delFlag: multipleSelection[i].delFlag,
									iccid: multipleSelection[i].iccid,
									id: multipleSelection[i].id,
									importId: multipleSelection[i].importId,
									status: multipleSelection[i].status,
									updateBy: multipleSelection[i].updateBy,
									updateTime: multipleSelection[i].updateTime
								}
								table[i] = params
							};
							workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table);
							FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {
								type: 'application/octet-stream'
							}), "sheetjs.xlsx")

						} else {
							this.$message.error(response.data.message);
						}
					})

			},
			changeData: function(s) {
				//如果存在ArrayBuffer对象(es6) 最好采用该对象
				if (typeof ArrayBuffer !== 'undefined') {
					//1、创建一个字节长度为s.length的内存区域
					var buf = new ArrayBuffer(s.length);
					//2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
					var view = new Uint8Array(buf);
					//3、返回指定位置的字符的Unicode编码
					for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
					return buf;
				} else {
					var buf = new Array(s.length);
					for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
					return buf;
				}
			},
			//活动加卡
			jiaka: function(id) {
				this.jiakas.activity_id = id
				this.log2 = true
			},
			//活动加卡上传文件
			shangchuan2: function(file) {
				this.jiakas.file = file.raw
			},
			tianjia2: function() {

				let url = ""
				var formData = new FormData();

				if (this.jiakas.radio == 2) {
					url = this.url + `/work/activity/addCardBatch`
					formData.append("activity_id", this.jiakas.activity_id)
					formData.append("file", this.huodong.file)
				} else {
					url = this.url +
						`/work/activity/addCardBatchWithNum?activity_id=${this.jiakas.activity_id}&start_num=${this.jiakas.start_num}&end_num=${this.jiakas.end_num}`
				}

				this.axios.post(url, formData)
					.then(response => {
						if (response.data.success == true) {
							this.$message.success("添加成功");
							this.jiakas = {
									activity_id: "",
									end_num: "",
									start_num: "",
									file: "",
									radio: "1"
								},
								this.loading = true
							this.gethuodong()
							this.log2 = false
						} else {
							this.$message.error(response.data.message);
						}
					})
			},


			shangchuan: function(file) {
				this.huodong.file = file.raw
			},
			xiazai: function() {
				const a = document.createElement('a');
				a.setAttribute('download', '');
				a.setAttribute('href', this.url + '/work/activity/getEecelDemo');
				a.click();
			},

			shanchu: function(id) {
				this.$confirm('是否真的删除此套餐?', '确认提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.post(this.url + `/work/activity/delete?id=${id}`)
						.then(response => {
							if (response.data.success == true) {

								this.loading = true
								this.gethuodong()
								this.$message.error("已删除套餐");
							} else {
								this.$message.error(response.data.message);
							}
						})
				})

			},
			timechange: function() {
				if (this.time == null) {
					this.huodong.startTime = ""
					this.huodong.endTime = ""
				} else {
					this.huodong.startTime = this.time[0]
					this.huodong.endTime = this.time[1]
				}
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.gethuodong()
			},
			//获取全部活动
			gethuodong: function() {
				this.axios.get(this.url + `/work/activity/list?pageNo=${this.page}&pageSize=${this.page_size}`)
					.then(response => {
						if (response.data.success == true) {
							this.tableData = response.data.result.records
							this.total = response.data.result.total
							this.loading = false
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			//添加活动
			tianjia: function() {
				console.log(this.huodong.isCurrent)
				let url = ""
				var formData = new FormData();

				// if (this.huodong.radio == 2) {
				// 	url = this.url + `/work/activity/addCardBatch`
				// 	formData.append("condition", this.huodong.condition)
				// 	formData.append("endTime", this.huodong.endTime)
				// 	formData.append("isCurrent", this.huodong.isCurrent)
				// 	formData.append("num", this.huodong.num)
				// 	formData.append("startTime", this.huodong.startTime)
				// 	formData.append("tips", this.huodong.tips)
				// 	formData.append("title", this.huodong.title)
				// 	formData.append("type", this.huodong.type)
				// 	formData.append("file", this.huodong.file)
				// } else {

				// }
				if(this.huodong.checked){
					var isFirst = 1
				}else{
					var isFirst = 0
				}
				
				// if(this.huodong.type==''||this.huodong.condition==''||this.huodong.endTime==''||this.huodong.isCurrent==''||this.huodong.num==''||this.huodong.startTime==''||this.huodong.tips==''||this.huodong.title==''){
				// 	this.$message.error('请填写所有信息');
				// 	return false
				// }	
				url = this.url +
					`/work/activity/add?type=${this.huodong.type}&condition=${this.huodong.condition}&endTime=${this.huodong.endTime}&isCurrent=${this.huodong.isCurrent}&num=${this.huodong.num}&startTime=${this.huodong.startTime}&tips=${this.huodong.tips}&title=${this.huodong.title}&isFirst=`+isFirst
				this.axios.post(url)
					.then(response => {
						if (response.data.success == true) {
							this.$message.success("添加活动成功");
							this.huodong = {
									type: "1",
									condition: "",
									endTime: "",
									isCurrent: "0",
									num: "",
									startTime: "",
									tips: "",
									title: ""
								},
								this.time = ""
							this.loading = true
							this.gethuodong()
							this.log = false
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			change: function() {
				this.log = true
			}
		},

	}
</script>

<style scoped lang="less">
	.all {
		display: flex;
		height: 100vh;

		.left {
			width: 200px;
			height: 100%;
			background: #414652;
			box-shadow: 0 2px 10px #2D3038;
		}

		.right {
			width: calc(100% - 180px);
			height: 100%;
			overflow: auto;

			.content {
				padding: 20px;

				.table {
					margin-top: 20px;
				}
			}
		}
	}
</style>
